<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户</title>
    <#include "common.ftl">
    <style>
        body {
            background-color: #F2F2F2;;
        }
    </style>
</head>
<body>
<ul class="layui-nav" lay-filter="tab">
    <li class="layui-nav-item"><a href="${ctx}/index">首页</a></li>
    <li class="layui-nav-item"><a href="${ctx}/user/index">用户</a></li>
    <li class="layui-nav-item"><a href="${ctx}/permission/index">菜单</a></li>
    <li class="layui-nav-item"><a href="">学习</a></li>
    <li class="layui-nav-item"><a href="${ctx}/photo/index">相册</a></li>
    <li class="layui-nav-item layui-this"><a href="${ctx}/user/onLineUsers">在线用户</a></li>
    <li class="layui-nav-item"><a href="${ctx}/gen/index">代码生成</a></li>
    <li class="layui-nav-item" style="float: right"><a href="${ctx}/layout">退出</a></li>
</ul>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="del">强制下线</a>
</script>
<script type="text/html" id="toolbarDemo">

</script>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
        element.on('nav(tab)', function (data) {
            var href = data[0].href;
            location.href = href;
        })
    })

    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        var tableIns = table.render({
            elem: '#demo'
            , height: 'full - 200'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , url: '${ctx}/user/onLineUsersList' //数据接口
            , toolbar: '#toolbarDemo'
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {title: '序号', type: 'numbers'}
                , {field: 'username', title: '用户名'}
                , {
                    field: 'status', title: '状态', templet: function (d) {
                        if (d.status == '1') {
                            return '<span class="layui-badge layui-bg-blue">在线</span>';
                        } else {
                            return '<span class="layui-badge layui-bg-blue">离线</span>';
                        }
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , response: {
                countName: 'total'
                , dataName: 'records'
            }
        });

        active = {
            reload: function () {
                var username = $('#username');
                //执行重载
                tableIns.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        username: username.val()
                    }
                });
            }
        };

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的要强制下线吗', function (index) {
                    layout(data.sessionId)
                    layer.close(index);
                });
            }
        });
    });

    function layout(id) {
        $.ajax({
            url:'${ctx}/user/userLayout',
            type:'post',
            data:{'sessionId': id},
            dataType:'text',
            success:function (data) {
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 20px 100px;">'+ data +'</div>'
                    ,btn: '关闭'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        layer.closeAll();
                    }
                });
            }
        })
    }

    // 重载
    $('#search').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
</script>
</body>
</html>